<template>
  <van-cell :to='"/article/"+articleItem.art_id'>
    <!--    标题-->
    <template #title>
      <div class="van-multi-ellipsis--l2">
        {{ articleItem.title }}
      </div>
    </template>
    <!--    lable-->
    <template #label>
      <div class="lable-img" v-if="articleItem.cover.type===3">
        <van-image use-error-slot
                   v-for="(item,index) in articleItem.cover.images"
                   :key="index"
                   fit="cover"
                   :src="item"
        >
          <text slot="error">加载失败</text>
        </van-image>

      </div>
      <div class="lable-box">
        <span>{{ articleItem.aut_name }}</span>
        <span>{{ articleItem.pubdate | formatDate }}</span>
        <span> 评论: {{ articleItem.comm_count }}</span>
      </div>
    </template>
    <!--右侧照片插槽-->
    <template>
      <van-image use-error-slot
                 :src="articleItem.cover.images[0]"
                 class="right-img"
                 v-if="articleItem.cover.type===1"
      >
        <text slot="error">加载失败</text>
      </van-image>
    </template>
  </van-cell>

</template>

<script>

export default {
  name: 'ArticleItem',
  props: {
    articleItem: {
      type: Object,
      required: true

    }
  }
}
</script>

<style scoped lang='less'>
.lable-box {
  span {
    margin: 0 8px;
  }
}

.van-cell__value {
  flex: unset;
}

.van-cell__value, .right-img {
  width: 232px;
  height: 146px;
}

.lable-img {
  display: flex;

  .van-image {
    width: 232px;
    height: 146px;
  }

  .van-image:nth-child(2) {
    margin: 0 4px;
  }
}
</style>
